import React, {Component} from 'react';

import './index.css'

class Footer extends Component {

    checkAllTodos=(x)=>{
        const {checkAll}=this.props
        return(e)=>{
            checkAll(e.target.checked)
        }
    }

    //清除已完成
    clearAllDone=()=>{
       const {clearDone}=this.props
        clearDone()
    }
    render() {

        const {todoList}=this.props
        // 已完成的任务数量
        const doneCount=todoList.reduce((pre,current)=>pre+(current.done===true?1:0),0)

        // 总任务数量
        const total=todoList.length

        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" checked={doneCount===total&&total!==0} onChange={this.checkAllTodos(1)}/>
                </label>
                <span>
          <span>已完成{doneCount}</span> / 全部{total}
        </span>
                <button className="btn btn-danger" onClick={this.clearAllDone}>清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;